<template>
  <div
    class="ebtn"
    :style="{
      '--wi': getscalepxc(150),
      '--hi': getscalepxc(40),
      '--fi': getscalepxc(13),
      '--bi': getscalepxc(20),
      '--pw': getscalepxc(130),
      '--pfs': getscalepxc(100),
    }"
  >
    <el-autocomplete
      class="inline-input"
      v-model="inputval"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
    <div
      class="ebtnimg"
      @click="btnimgclick()"
      :style="{
        right: getscalepxc(-8),
        top: getscalepxc(-7),
        width: getscalepxc(53),
        height: getscalepxc(53),
      }"
    ></div>
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "commonsearchbtn",
  //搜索框组件，模糊搜索，视角跳转至选择站点并且打开3d卡片
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      inputval: "",
    };
  },
  computed: {},
  watch: {},
  mounted() {
    
  },
  methods: {
    handleSelect() {},
    btnimgclick() {
      //获取选中站点对应的信息（坐标和id）
      let resf = [];
      let resfobj = [];
      Object.keys(this.$root.nv).map((item) => {
        if (this.$root.nv[item].name == this.inputval) {
          resf = this.$root.nv[item].location;
          resfobj = this.$root.nv[item];
        }
      });


      if (resf != []) {
        //切换视角
        this.$root._earth.camera.flyTo(resf, 5000, [
          (360 * Math.PI) / 180,
          (-28 * Math.PI) / 180,
          0,
        ]);
        //弹出切换成功notify
        this.$notify.info({
          message: "切换至" + this.inputval,
        });
        //弹出3d卡片
        this.$store.state.daping.threecom.pickleftclick({
          id: resfobj.id.split(".")[0],
          pid: resfobj.id.split(".")[1],
          position: resfobj.ln,
        });

      }
    },
    querySearch(queryString, cb) {
      this.restaurants = this.loadAll();
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return Object.keys(this.$root.nv).map((item) => {
        return {
          value: this.$root.nv[item].name,
          location: this.$root.nv[item].location,
        };
      });
    },
  },
};
</script>
<style lang='scss'>
.el-autocomplete-suggestion {
  width: var(--pw) !important;
  li {
    // font-size: var(--pfs) !important;
    font-size: var(--pfs) !important;
  }
}
.ebtn {
  position: relative;
  .el-input {
    font-size: var(--fi) !important;
  }
  .ebtnimg {
    position: absolute;
    // right: -15px;
    // top: -13px;
    background-image: url("/configuration/2d/sousuo.png");
    // width: 110px;
    // height: 110px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .el-input__inner {
    font-size: var(--fi);
    border-radius: var(--bi);
    background-color: #08244c;
    border-color: #77d2ff;
    width: var(--wi);
    height: var(--hi);
  }
}
</style>